<template>
    <base-breadcrumb>
        <searchData ref="search" :searchData="searchArr" @search="search"></searchData>
        <a-card>
            <list-table
              ref="table"
              class="export-table"
              rowKey="id"
              :columns="columns"
              :request="loadData"
              :startIndex="0"
              :statisticsConfig="{use: true, temp: statisticsTemp}"
              :export-config="{ use: true, select: '施组方案交底记录', all: '施组方案交底记录' }"
              :export-permission="{select: 'tm_008_exp_06',all: 'tm_008_exp_06'}"
              :is-show-count-bar="false"
              @select-click="selectClick"
            >
              <template slot="prefix">
                <a-button v-btnPermission="'tm_008_add_01'" type="primary" icon="plus" @click="handleUpdate('add', {})">新增会议</a-button>
              </template>
              <a-collapse slot="suffix" :bordered="false" v-model="activeKey" expand-icon-position="right" class="mb12">
                    <a-collapse-panel style="background: #e6f3fc; border: none" :showArrow="false">
                        <template slot="header">
                        <a-row type="flex" justify="space-between" align="middle" style="width: 100%">
                            <div>
                            <a-icon style="color: #108ee9" type="exclamation-circle" />
                                <span>
                                已选择<a>{{ selectLength || 0 }}</a> 项</span
                            >
                            <span>
                                总计：<a>{{ totalInfo.allNum  || 0 }}</a></span
                            >
                            <span>
                                已审批方案数：<a>{{ totalInfo.alreadyAppNum || 0 }}</a> 个</span
                            >
                            <span
                                >{{ ' | ' }}已交底方案数：<a>{{ totalInfo.alreadyMeetNum || 0 }}</a> 个</span
                            >
                        
                            </div>
                            <div>
                            <a class="btn_right">
                                <span>{{ activeKey.length > 0 ? '收起' : '展开' }}详情信息</span>
                                <a-icon :type="activeKey.length > 0 ? 'up' : 'down'" />
                            </a>
                            </div>
                        </a-row>
                        </template>
                        <div>
                            <p style="margin-bottom:0">
                                <span >本单位方案：待开始交底数量：<a>{{ totalInfo.confessStartNum || 0 }}</a> 个</span>
                                <span>{{ ' | ' }}进行中交底数量：<a>{{ totalInfo.confessMakeNum || 0 }}</a> 个</span>
                                <span>{{ ' | ' }}已交底数量：<a>{{ totalInfo.confessAlreadyNum || 0 }}</a></span>
                                <span>{{ ' | ' }}计划交底数量：<a>{{ totalInfo.confessPlanNum || 0 }}</a></span>
                                <span>{{ ' | ' }}交底完成率：<a>{{ totalInfo.confessRate || 0 }}%</a></span>
                             </p>
                            <span >专业分包方案：  已交底数量：<a>{{ totalInfo.majorAlreadyNum || 0 }}</a> 个</span>
                            <span>{{ ' | ' }} 计划交底数量：<a>{{ totalInfo.majorPlanNum || 0 }}</a> 个</span>
                            <span>{{ ' | ' }}交底完成率：<a>{{ totalInfo.majorRate || 0 }}%</a></span>
                        </div>
                    </a-collapse-panel>
             </a-collapse>
                <span slot="operation" slot-scope="text, record">
                    <a @click="handleUpdate('start', record)" v-if="record.status == 20" v-btnPermission="'tm_008_edi_02'">查看会议</a>
                    <a @click="handleUpdate('edit', record)" v-if="record.status == 30" v-btnPermission="'tm_008_edi_02'">进入会议</a>
                    <a @click="handleUpdate('look', record)" v-if="record.status == 40" v-btnPermission="'tm_008_loo_03'">查看会议</a>
                    <a-divider type="vertical"  v-if="record.status == 40" />
                    <a @click="handleUpdate('update', record)"  v-if="record.status == 40" v-btnPermission="'tm_008_add_05'">新增交底记录</a>
                </span>
                <span slot="commentedPlan" slot-scope="text, record">
                    {{ record.meetingExtraVO.commentedPlan }}
                </span>
                <span slot="professionComName" slot-scope="text, record">
                    {{ record.meetingExtraVO.professionComName }}
                </span>
                <span slot="avgScore" slot-scope="text, record">
                    {{ record.meetingExtraVO.avgScore }}
                </span>

                <span slot="status" slot-scope="text, record">
                    <list-status :status="record.status" conversion="en"></list-status>
                </span>
            </list-table>
        </a-card>
    </base-breadcrumb>
</template>
<script>
import OrgTreeSelect from '@/components/OrgTreeSelect'
import { STable } from '@/components'
import listStatus from '@/components/list_status/meeting_status'
import { getMeetingList, startMeeting, getSearchList,getTechnicalProgramCount} from '@/api/office/conference'
import { getmeetingTotal } from '@/api/technical/meeting.js'
import moment from 'moment'
import { Collapse } from 'ant-design-vue' // ant

const columns = [
    {
        title: '所属分公司',
        dataIndex: 'branchComName',
    },
    {
        title: '所属项目',
        dataIndex: 'projectName',
    },
    {
        title: '会议名称',
        dataIndex: 'meetingName',
    },
    {
        title: '会议类型',
        dataIndex: 'meetingTypeName',
    },
    {
        title: '交底人',
        dataIndex: 'confessUserName',
    },
    {
        title: '是否为专业分包方案',
        dataIndex: 'proSub',
    },
    {
        title: '召开时间',
        dataIndex: 'startTime',
    },
    {
        title: '参会人数',
        dataIndex: 'meetingCount',
    },
    {
        title: '状态',
        dataIndex: 'statusSer',
        scopedSlots: { customRender: 'status' },
    },
    {
        title: '操作',
        dataIndex: 'operation',
        width: '170px',
        scopedSlots: { customRender: 'operation' },
    },
]
const searchArr = [
    // {
    //     name: '所属分公司',
    //     valueKey: 'branchComId',
    //     type: SelectSubCompany,
    // },
    {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
    // {
    //     name: '所属项目',
    //     keyValue: 'branchComId',
    //     valueKey: 'projectId',
    //     type: SelectProject,
    // },
    {
        name: '会议名称',
        value: 'meetingName',
        type: 'input',
    },
    {
        name: '召开时间',
        value: 'startEndDate',
        type: 'dateRange',
    },
    {
        name: '状态',
        value: 'status',
        type: 'select',
        data: [
            {
                value: 20,
                label: '待开始',
            },
            {
                value: 30,
                label: '进行中',
            },
            {
                value: 35,
                label: '审批中',
            },
            {
                value: 40,
                label: '已完结',
            },
        ],
    },
    {
        name: '是否为专业分包方案',
        value: 'isProSub',
        type: 'select',
        data: [
            {value: 1,label: '是', },
            {value: 0,label: '否',},
        ],
    },
    { name: '审批通过方案时间', value: 'reportingTime2', type: 'dateRange', attr: {
          rangeFormat: ['endAuditDateStart', 'endAuditDateEnd'],
        } },
        
]
export default {
    name:'a'+Date.now(),    components: {
        STable,
        listStatus,
        ACollapse: Collapse,
        ACollapsePanel: Collapse['Panel']
    },
    data() {
        this.columns = columns
        this.searchArr = searchArr
        return {
            totalInfo: {}, // 统计信息
            queryParam: {},
            activeKey: [],
            selectLength:0,
            loadData: async (parameter) => {
                this.queryParam.query = { ...this.queryParam.query, typeId: 7 }
                const requestParameters = Object.assign({}, parameter, this.queryParam)
                 // 调用统计接口
                const [err, res] = await getMeetingList(requestParameters)
                return new Promise((resolve, reject) => {
                    if (err) {
                        reject(err)
                    } else {
                        resolve(res)
                        this.getmeetingTotalReq(requestParameters)
                    }
                })
            },
        }
    },
    mounted() {
        // this.getSearchListReq()
        this.$refs.search.form.setFieldsValue({startEndDate: [moment().startOf('month'), moment()]})
    },
    methods: {
        selectClick(a,b){
        this.selectLength = a.rows.length;
        },
        /**
         * 获取统计信息
         */
        async getmeetingTotalReq(params) {
            try {
                const res = await getTechnicalProgramCount(params)
                this.totalInfo = res[1].data || {}
            } catch(e) {
                console.error(e)
            }
        },
        //搜索
        search(val = {}) {
            this.queryParam.query = {
                ...val,
                typeId: 7,      
                hsemonth: (val.month && val.month.format('YYYY-MM')) || void 0,
                startTime:
                    (val.startEndDate && val.startEndDate.length && val.startEndDate[0].format('YYYY-MM-DD')) || void 0,
                endTime:
                    (val.startEndDate && val.startEndDate.length && val.startEndDate[1].format('YYYY-MM-DD')) || void 0,
            }
            console.log(this.queryParam)

            this.$refs.table.refresh(true)
        },

        // 处理更新操作（新增、编辑）
        async handleUpdate(type, data = {}) {
            if (type == 'del') {
                // const [err, res] = await deleteEquipment({ id: data.id })
                // if (!err) {
                //     this.$message.success('成功')
                //     this.$refs.table.refresh(true)
                // }
            }
            // else if (type == 'start') {
            //     const [err, res] = await startMeeting({ id: data.id })
            //     if (!err) {
            //         this.$message.success('成功')
            //         this.$refs.table.refresh(true)
            //     }
            // }
            else if (type == 'edit' || type == 'look' || type == 'start' || type == 'update') {
                this.$router.push({
                    name: 'constructionSchemeMeetingInputSummary',
                    query: {
                        id: data.id || '',
                        pageType: type,
                    },
                })
            } else {
                this.$router.push({
                    name: 'constructionSchemeMeetingAddConference',
                    query: {
                        id: data.id || '',
                        pageType: type,
                        typeId: 7,
                    },
                })
            }
        },
        /**
         * 统计
         */
        statisticsTemp() {
          return (
            <span>
              <span>已审批方案数：<a>{ this.totalInfo.allNum || 0  }</a></span>
              <span> | 已交底方案数：<a>{ this.totalInfo.completeNum || 0  }</a></span>
              <p><span>本单位方案：待开始交底数量：<a>2</a> </span> | <span>进行中交底数量：<a>2</a> </span>|  <span>已交底数量：<a>2</a></span> | <span> 计划交底数量：<a>2</a></span>| <span>交底完成率：<a>1</a></span></p>
            </span>
          )
        }
    },
}
</script>
